Add support for dynamically displaying the How You'll Learn cards by jkachel · Pull Request #3198 · mitodl/mit-learn

jkachel · 2026-04-14T17:03:55Z

What are the relevant tickets?

Closes mitodl/hq#10856
Depends on mitodl/mitxonline#3487

Description (What does it do?)

The dependent PR adds a handful of fields to the product pages that allow the cards in the How You'll Learn section to be toggled on and off. This is the other side of that; it updates the product pages to only display the cards that are checked in the CMS page.

Screenshots (if appropriate):

(Probably worth noting here that I didn't change any of the text on the 4 cards that exist. So, "Learn by Doing" seemed like it should match up with the "Practical Application" card, so that's what I set it to.)

How can this be tested?

Test with both a course page and a program page. (Ideally, also test with a program-course; those don't have a separate product page necessarily but good to check anyway.)

For the given item, go into the CMS in MITx Online and check random boxes in the How You'll Learn section and publish your changes. Then, check the product page in Learn. You should only see cards for the selected items.

Additional Context

We'll want to additionally customize this according to the kind of course or provider (or maybe some other thing). The wording and iconography may need to change for different situations - UAI versus xPRO versus MITx, etc. - which we can do in the frontend. This PR doesn't implement that, though.

This needs some text and icons for the new cards. We had these before I started mucking with it:

Practical Application - "Learn by Doing"
Real-World Learning
AI-Enabled Support
Stackable Credentials

The new ones are "Learn From Others" and "Learn On Demand". They have the text from the issue but I reused the brains icon.

github-actions · 2026-04-14T17:04:12Z

OpenAPI Changes

2 changes: 0 error, 1 warning, 1 info

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates product pages to dynamically render the “How you’ll learn” cards based on CMS-controlled boolean fields introduced in a dependent API PR.

Changes:

Replaces static “How you’ll learn” placeholder data with a fixed option set filtered by CMS booleans on the page object.
Updates Course/Program product pages to pass page into HowYoullLearnSection.
Extends page test factories with the new hyl_choice_* boolean fields.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontends/main/src/app-pages/ProductPages/ProgramPage.tsx	Passes `page` to `HowYoullLearnSection` instead of default placeholder cards.
frontends/main/src/app-pages/ProductPages/ProgramAsCoursePage.tsx	Same as ProgramPage: switches `HowYoullLearnSection` to be page-driven.
frontends/main/src/app-pages/ProductPages/CoursePage.tsx	Same as above for course product pages.
frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx	Introduces option registry and filters cards based on `hyl_choice_*` fields on the page.
frontends/api/src/mitxonline/test-utils/factories/pages.ts	Adds defaults for the new `hyl_choice_*` booleans in test factories.

Copilot · 2026-04-15T15:38:52Z

+  const filteredOptions = HOW_YOULL_LEARN_OPTIONS.filter(
+    (option) =>
+      page.hasOwnProperty(option.name) &&
+      (page as unknown as Record<string, boolean>)[option.name],
+  )


Avoid calling page.hasOwnProperty(...) directly and the unknown as Record<string, boolean> cast. Prefer Object.prototype.hasOwnProperty.call(page, option.name) (or option.name in page) and update the name type to a keyof of the page types so TypeScript can enforce that option names match real API fields.

@copilot apply changes based on this feedback

Done in commit 7dc5e6a. Changes made:

Removed page.hasOwnProperty(option.name) entirely — key existence is guaranteed by the typed HylChoiceKey union

Replaced unknown as Record<string, boolean> with Record<HylChoiceKey, boolean | undefined> (no unknown intermediary, plus an explicit === true check to safely handle any missing/undefined fields)

Defined HylChoiceKey as an explicit string union of the known hyl_choice_* field names, typed into HowYoullLearnOption.name — a comment notes it should be replaced with Extract<keyof CoursePageItem & keyof ProgramPageItem, \hyl_choice_${string}`>` once the dependent API PR is published

Also fixed the array-index React key (addressed by the adjacent review comment): the intermediate items array was removed and the render now maps directly over filteredOptions, keying each item on option.name.

Copilot · 2026-04-15T15:38:52Z

+        {items.map((item, index) => (
          <HowYoullLearnItem key={index}>


Using the array index as a React key can cause incorrect reconciliation when cards are toggled on/off (items shift and React may reuse DOM/state for the wrong card). Use a stable key derived from the option (e.g., the hyl_choice_* name) by mapping filteredOptions directly and keying on option.name.

@copilot apply changes based on this feedback

jkachel · 2026-04-15T16:07:27Z

This is ready for review but won't be mergeable until the MITx Online PR gets merged.

jkachel · 2026-04-16T16:37:59Z

32deed8 requires a MITx Online instance that's at commit mitodl/mitxonline@8d0b1df to work - the HYL API data was refactored significantly.

ChristopherChudzicki

Tested this with your branch client via mitodl/mitxonline-api-clients#63... API data comes through well.

If you have time, i think it would be nice to

change the factory to faker / lorem data
add a test asserting it renders whichever ones the backend is returning
- this is complicated a bit by the icon values, I guess.

but it's a very simple component so not too worried about it.

ChristopherChudzicki · 2026-04-16T17:44:26Z

+    default:
+      console.warn(`Unknown how_youll_learn icon: ${src}`)
+  }


We should flag in the issue or somewhere that right now we have 3 repeated icons if you enable all of them:

Originally there was a fifth icon (we only had 2 duplicates) https://github.com/mitodl/mit-learn/blob/cdabbf911573599118eeb4766ffabd2035a659d0/frontends/main/public/images/product/icon_book_play.png but I removed it when we culled the hard-coded list down to 4.

The "Learn From Others" and "Learn On Demand" ones are the new ones so will ping folks about that - initially i think we'll probably just not use those two. (I need to get something in place to set the defaults for existing courses, too; we discussed this in the MITx Online PR and then I forgot to put it in..)

ChristopherChudzicki

errr requesting a change more as a "don't forget" but

Requested change: update the api client after your mitxonline pr gets to production

looks fine otherwise, with minor comments earlier.

…ards from there; update where this gets called

Agent-Logs-Url: https://github.com/mitodl/mit-learn/sessions/ed6a7a47-f467-48eb-be2a-464691b2fe77 Co-authored-by: jkachel <945611+jkachel@users.noreply.github.com>

….tsx Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>

jkachel · 2026-04-23T20:50:38Z

@ChristopherChudzicki the API client is updated and I think this ended up triggering a handful of other, minor changes because some types changed in the client.. if you want to give it another quick run through please do - otherwise i will plan to merge this sometime tomorrow (Friday) in the afternoon.

jkachel marked this pull request as ready for review April 15, 2026 15:36

Copilot AI review requested due to automatic review settings April 15, 2026 15:36

jkachel added the Needs Review An open Pull Request that is ready for review label Apr 15, 2026

Copilot AI reviewed Apr 15, 2026

View reviewed changes

sentry Bot reviewed Apr 15, 2026

View reviewed changes

Comment thread frontends/main/src/app-pages/ProductPages/HowYoullLearnSection.tsx Outdated

Copilot started work on behalf of jkachel April 15, 2026 15:41 View session

Copilot finished work on behalf of jkachel April 15, 2026 15:59

jkachel mentioned this pull request Apr 15, 2026

Add fields for configuring the How You'll Learn cards on product pages mitodl/mitxonline#3487

Merged

jkachel force-pushed the jkachel/10856-toggle-hyl-cards branch from bd02215 to 32deed8 Compare April 16, 2026 16:31

ChristopherChudzicki approved these changes Apr 16, 2026

View reviewed changes

ChristopherChudzicki requested changes Apr 16, 2026

View reviewed changes

jkachel and others added 8 commits April 22, 2026 13:17

Rough-in the toggleable HYL cards

e1d4f9f

Refactor the HYL section to take the page object and figure out the c…

99ab2f0

…ards from there; update where this gets called

finally figure out how to run fmt/lint/typecheck

3e3f524

Fixing tests

5dfdce4

Fix hasOwnProperty, unknown cast, and React key in HowYoullLearnSection

bc3286f

Agent-Logs-Url: https://github.com/mitodl/mit-learn/sessions/ed6a7a47-f467-48eb-be2a-464691b2fe77 Co-authored-by: jkachel <945611+jkachel@users.noreply.github.com>

Use explicit === true check for hyl_choice field values

ea6b5b6

Agent-Logs-Url: https://github.com/mitodl/mit-learn/sessions/ed6a7a47-f467-48eb-be2a-464691b2fe77 Co-authored-by: jkachel <945611+jkachel@users.noreply.github.com>

Update section component to work with the new version of the API

79a7c79

Update MITx Online API client

8fcd872

jkachel force-pushed the jkachel/10856-toggle-hyl-cards branch from 32deed8 to 8fcd872 Compare April 23, 2026 17:41

jkachel and others added 5 commits April 23, 2026 13:05

other place referenced the API client

bb81a1a

fix typing issues

bc96c50

fmt fix

ec293f8

fix other unrelated typing issue

5a5d11f

Update frontends/main/src/app-pages/ProductPages/HowYoullLearnSection…

52626c5

….tsx Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>

jkachel requested a review from ChristopherChudzicki April 27, 2026 21:05

ChristopherChudzicki approved these changes Apr 28, 2026

View reviewed changes

jkachel merged commit 421d258 into main Apr 28, 2026
13 checks passed

jkachel deleted the jkachel/10856-toggle-hyl-cards branch April 28, 2026 20:07

odlbot mentioned this pull request Apr 29, 2026

Release 0.65.2 #3266

Merged

9 tasks

		{items.map((item, index) => (
		<HowYoullLearnItem key={index}>

Conversation

jkachel commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Additional Context

Uh oh!

github-actions Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

OpenAPI Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

jkachel Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

jkachel Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jkachel commented Apr 15, 2026

Uh oh!

jkachel commented Apr 16, 2026

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ChristopherChudzicki Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

jkachel Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

jkachel commented Apr 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jkachel commented Apr 14, 2026 •

edited

Loading

github-actions Bot commented Apr 14, 2026 •

edited

Loading